<script setup lang='ts'>
// 热门推荐页 标题和url
import { getUserListByDeptIdApi } from '@/services/dept'
import { onLoad } from '@dcloudio/uni-app'
import { ref } from 'vue'
import type { UserItem } from '@/types/dept'
import type { CategoryItem } from '@/types/home'
import { getHomeCategoryMutliAPI } from '@/services/home'

// uniapp 获取页面参数
const query = defineProps<{
  deptId: string;
  deptName: string;
}>()

//定义一个科室对象
const dept = ref({
  deptId: query.deptId,
  deptName: query.deptName,
})


// 动态设置标题
uni.setNavigationBarTitle({ title: query.deptName })
// uni.setNavigationBarTitle({ title: currUrlMap?.title })

// 医生列表信息
// typescripts
const userList = ref<UserItem[]>([])
// 获取当前科室医生信息
const getUserListByDeptData = async () => {
  const res = await getUserListByDeptIdApi(query.deptId)
  userList.value = res.data
}

// 获取所有课室信息
const deptList = ref<CategoryItem[]>([])
const getHomeCategoryMutliData = async () => {
  const res = await getHomeCategoryMutliAPI()
  deptList.value = res.data
}
onLoad(() => {
  getUserListByDeptData()
  getHomeCategoryMutliData()
})

// ssconst popup = ref();

const toggle = (data: string) => {
  console.log(data)
  // open 方法传入参数 等同在 uni-popup 组件上绑定 type属性
  popup.value.open(data)
}

const activeClick = ref(0)

// 选取科室按钮
const deptPopup = ref()
const deptButton = (ev: string) => {
  activeClick.value = 1
  deptPopup.value.open(ev)
}

// 选取综合排序按钮
const sortButton = async () => {
  activeClick.value = 2
  const res = await getUserListByDeptIdApi(dept.value.deptId)
  userList.value = res.data
}
//点击科室按钮
const clickButton = async (e: string) => {
  const res = await getUserListByDeptIdApi(e)
  userList.value = res.data
  dept.value.deptName = res.data[0].deptName
  dept.value.deptId = String(res.data[0].deptId)

  // 顶部文字变化
  uni.setNavigationBarTitle({ title: dept.value.deptName })
  //
}
</script>

<template>
  <view class='viewport'>
    <!-- 推荐选项 -->
    <view class='tabs'>
      <text
        class='text'
        :class='{ active: activeClick === 1 }'
        @tap="deptButton('top')"
      >{{ dept.deptName }}
      </text
      >
      <text
        :class='{ active: activeClick === 2 }'
        class='text'
        @tap='sortButton()'
      >综合排序
      </text
      >
    </view>
    <!-- 科室列表 -->
    <scroll-view scroll-y class='scroll-view'>
      <navigator
        v-if='userList.length > 0'
        hover-class='none'
        class='navigator'
        v-for='item in userList'
        :key='item.deptId'
        :url='`/pages/userDetails/userDetails?userId=${item.userId}`'
      >
        <view class='icon'>
          <image :src='item.picture'></image>
        </view>
        <view class='right'>
          <!--头部信息-->
          <view class='title'>
            <text class='name'>{{ item.userName }}</text>
            <!--医生级别-->
            <text class='userRank'>{{ item.userRank }}</text>
          </view>
          <!--医生科室信息-->
          <view class='deptName'>
            <text>{{ item.deptId }}</text>
          </view>
          <!--医生简介-->
          <view class='introduction'>{{ item.introduction }}</view>
          <!--医生标签-->
          <view class='tag'>
            <uni-tag
              :circle='true'
              :text='item?.strong'
              type='success'
              size='small'
            />
            <uni-tag
              style='margin-left: 20rpx'
              :circle='true'
              :text='item?.honor'
              type='warning'
              size='small'
            />
          </view>
        </view>
      </navigator>
      <view v-else class='loading-text'>暂无数据...</view>
    </scroll-view>
  </view>

  <!-- 普通弹窗 -->
  <uni-popup
    class='deptContent'
    ref='deptPopup'
    background-color='#fff'

  >
    <view class='deptContent'>
      <view class='dept' v-for='item in deptList' :key='item.deptId'>
        <navigator
          style='width: 100rpx'
          class='dept'
          @tap='clickButton(item.deptId)'
        >{{ item.deptName }}
        </navigator
        >
      </view>
    </view>
    <!-- <view class="popup-content" :class="{ 'popup-height': 'top' }"><text class="text">popup 内容 </text></view> -->
  </uni-popup>
</template>

<style lang='scss' scoped>
page {
  height: 100%;
  background-color: #f4f4f4;
}

.viewport {
  display: flex;
  flex-direction: column;
  height: 100%;
  position: relative;
}

.cover {
  width: 750rpx;
  height: 225rpx;
  border-radius: 0 0 40rpx 40rpx;
  overflow: hidden;
  position: absolute;
  left: 0;
  top: 0;

  .image {
    width: 750rpx;
  }
}

.scroll-view {
  flex: 1;
}

.tabs {
  display: flex;
  justify-content: space-evenly;
  height: 100rpx;
  line-height: 90rpx;
  margin: 0 20rpx;
  font-size: 28rpx;
  border-radius: 10rpx;
  box-shadow: 0 4rpx 5rpx rgba(200, 200, 200, 0.3);
  color: #333;
  background-color: #fff;
  position: relative;
  z-index: 9;

  .text {
    margin: 0 20rpx;
    position: relative;
  }

  .active {
    &::after {
      content: "";
      width: 40rpx;
      height: 4rpx;
      transform: translate(-50%);
      background-color: #27ba9b;
      position: absolute;
      left: 50%;
      bottom: 24rpx;
    }
  }
}

.navigator {
  width: 95%;
  margin: 20rpx;
  padding: 20rpx;
  border-radius: 10rpx;
  background-color: #ffffff;
  display: flex;

  .icon {
    flex: 2;

    image {
      width: 125rpx;
      height: 125rpx;
      background: none;
      border-radius: 50%;
      border: none;
    }
  }

  .right {
    flex: 10;
    padding-left: 20rpx;

    view {
      margin-top: 5rpx;
    }

    .title {
      .name {
        font-weight: bolder;
      }

      .userRank {
        margin-left: 20rpx;
        font-weight: 200;
        font-size: smaller;
      }
    }

    .introduction {
      font-size: 22rpx;
      color: #999999;
      font-weight: 400;
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 3;
      -webkit-box-orient: vertical;
    }
  }
}

.loading-text {
  text-align: center;
  font-size: 32rpx;
  font-weight: bolder;
  color: #666;
  padding: 80rpx 0 50rpx;
}

.deptContent {
  display: flex !important;
  flex-wrap: wrap;
  justify-content: space-around;
  width: 100%;
  margin: 0 5rpx 20rpx 5rpx;

  .dept {
    // width: 120rpx;
    padding: 2rpx 2rpx;
    margin: 10rpx 15rpx;
    background: #f4f5f5;
    font-size: 22rpx;
    font-weight: 300;
    text-align: center;
    border-radius: 30rpx;
    text-overflow: ellipsis;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
  }
}
</style>
